<template>
	<view class="container">
		<view class="u-demo-area" @click="show = true">
			<u-calendar :safe-area-inset-bottom="true" v-model="show" ref="calendar" @change="change" :mode="mode"
				:range-color="rangeColor" :btnBgColor="btnBgColor"
				:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor" :btn-type="btnType" 
			>
			</u-calendar>
			<view class="u-demo-result-line">
				<view class="text-line">{{startText}}<u-icon name="arrow-down"></u-icon></view>
				<view class="text_to">至</view>
				<view class="text-line">{{endText}}<u-icon name="arrow-down"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'calendar',
		data(){
			return{
				show: false,
				mode: 'range',
				startText: '开始日期',
				endText: '结束日期',
				rangeColor: '#EA4445',
				rangeBgColor: 'rgba(214,156,99, 0.13)',
				activeBgColor: '#EA4445',
				btnBgColor:'#EA4445',
				btnType: '',
			}
		},
		methods:{
			change(e) {
				this.startText = e.startDate;
				this.endText = e.endDate;
				this.$emit('change',e)
			}
		}
	}
</script>

<style scoped>
	.u-demo-result-line{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.text_to{
		margin: 0 5rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 48rpx;
	}
	.text-line{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 10rpx;
		padding-left: 10rpx;
		min-width: 180rpx;
		height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 48rpx;
		border: 2rpx solid #808080;
		border-radius: 24rpx;
	}
</style>